<template>
  <x-breadcrumb :content-list="contentList"></x-breadcrumb> <!-- 面包屑导航 -->

  <el-card class="box-card mt-3">
    <el-row>
      <el-col>
        <el-button type="primary" @click="dialogObj.dialogVisible = true">添加角色</el-button>
      </el-col>
    </el-row>

    <el-table
      :data="tableData"
      style="width: 100%"
      border
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center' }"
      class="mt-3"
      @expand-change="expandChangeEvent"
    >
      <el-table-column type="expand" label=">">
        <template #default="scope">
          <el-row v-for="(rowItem, i1) in tagsData[scope.row.id || scope.row.roleId].children" :key="rowItem.id" :class="['bdbottom', i1 === 0 ? 'bdtop' : '', 'vcenter']">
            <el-col :span="5">
              <el-tag closable @close="tagCloseEvent(rowItem, scope.row)" :disable-transitions="false">{{rowItem.authName}}</el-tag>
              <i class="el-icon-caret-right"></i>
            </el-col>
            <el-col :span="19">
              <el-row v-for="(rowTwoItem, i2) in rowItem.children" :key="rowTwoItem.id" :class="[i2 === 0 ? '' : 'bdtop', 'vcenter']">
                <el-col :span="6">
                  <el-tag type="success" closable @close="tagCloseEvent(rowTwoItem, scope.row)" :disable-transitions="false">{{rowTwoItem.authName}}</el-tag>
                  <i class="el-icon-caret-right"></i>
                </el-col>
                <el-col :span="18">
                  <el-tag
                  closable
                  type="danger"
                  :disable-transitions="false"
                  v-for="colItem in rowTwoItem.children"
                  :key="colItem.id"
                  @close="tagCloseEvent(colItem, scope.row)"
                  >{{colItem.authName}}</el-tag>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column type="index" label="#" width="180"> </el-table-column>
      <el-table-column prop="roleName" label="角色名称"> </el-table-column>
      <el-table-column prop="roleDesc" label="角色描述"> </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="changeDialogObj.rolesChangeClick(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="changeDialogObj.rolesDeleteClick(scope.row)">删除</el-button>
          <el-button size="mini" type="warning" icon="el-icon-setting" @click="showSetRightDialog(scope.row)" :disabled="tagsData[scope.row.id || scope.row.roleId].disabled">分配权限</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <el-dialog
    title="添加角色"
    v-model="dialogObj.dialogVisible"
    width="50%"
    :before-close="dialogObj.handleClose"
  >
    <el-form :model="rolesParams.formData" :rules="formRules" label-position="top">
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="rolesParams.formData.roleName"></el-input>
      </el-form-item>
      <el-form-item label="角色描述" prop="roleDesc">
        <el-input v-model="rolesParams.formData.roleDesc"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogObj.dialogClose">取 消</el-button>
        <el-button type="primary" @click="dialogObj.dialogSubmit">确 定</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog
    title="修改权限"
    v-model="changeDialogObj.changeDialogVisible"
    width="50%"
    :before-close="changeDialogObj.changeHandleClose"
  >
    <el-form :model="rolesParams.changeFormData" :rules="formRules" label-position="top">
      <el-form-item label="角色Id">
        <el-input v-model="rolesParams.changeFormData.roleId" disabled></el-input>
      </el-form-item>
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="rolesParams.changeFormData.roleName"></el-input>
      </el-form-item>
      <el-form-item label="角色描述" prop="roleDesc">
        <el-input v-model="rolesParams.changeFormData.roleDesc"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="changeDialogObj.changeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeDialogObj.changeDialogSubmit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog
    title="分配权限"
    v-model="assignDialogObj.assignDialogVisible"
    width="50%"
    :before-close="assignDialogObj.assignHandleClose"
  >
    <el-tree
      :data="rolesParams.assignTreeObj.treeData"
      show-checkbox
      node-key="id"
      ref="treeRefDom"
      default-expand-all
      :default-checked-keys="rolesParams.assignTreeObj.checkedKeysArr"
      :props="rolesParams.assignTreeObj.defaultProps"
    >
    </el-tree>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="assignDialogObj.assignDialogCancel">取 消</el-button>
        <el-button type="primary" @click="assignDialogObj.assignDialogSubmit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, onMounted, computed, ref, Ref } from 'vue'
import TreeStore from 'element-plus/es/el-tree/src/model/tree-store'
import { rowBtnLogic, rolesParams, addRolesFn, treeFunc, expandAndTagsEvents } from './rolesParamsAndEvents'
import XBreadcrumb, { contentType } from '@/components/public-components/XBreadcrumb.vue'
import { useStore } from '@/store'
import { objToArr } from '@/utils/helper'
import { RolesTypeInterface, tagsDataType } from '@/store/storeType'

const formRules = {
  roleName: [
    {required: true, message: '请输入角色名称', trigger: 'blur'}
  ],
  roleDesc: [
    {required: true, message: '请输入角色名称', trigger: 'blur'}
  ],
}

const contentList: contentType[] = ['首页', '权限管理', '角色列表']

export default defineComponent({
  name: 'HomeRightsToRoles',
  components: {
    XBreadcrumb
  },
  setup () {
    const store = useStore()

    onMounted(() => {
      if (Object.keys(store.state.rightsModule.rolesData).length === 0) {
        store.dispatch('rightsModule/getRolesData')
      }
    })

    const tableData = computed<RolesTypeInterface[]>(() => objToArr(store.state.rightsModule.rolesData))

    const tagsData = computed<{ [key: number]: tagsDataType }>(() => store.state.rightsModule.tagsData)

    const treeRefDom = ref<TreeStore>()

    const { dialogObj } = addRolesFn(store)

    const { assignDialogObj } = treeFunc(store, treeRefDom as Ref<TreeStore>)

    const { showSetRightDialog, changeDialogObj } = rowBtnLogic(store, assignDialogObj)

    const { tagCloseEvent, expandChangeEvent } = expandAndTagsEvents(store)

    return { tableData, showSetRightDialog, dialogObj, formRules, changeDialogObj, assignDialogObj, expandChangeEvent, treeRefDom, tagCloseEvent, tagsData, rolesParams, contentList }
  }
})
</script>

<style lang="scss" scoped>
.el-tag {
  margin: 7px;
}

.bdtop {
  border-top: 1px solid #eee;
}

.bdbottom {
  border-bottom: 1px solid #eee;
}

.vcenter {
  display: flex;
  align-items: center;
}
</style>